<template>
  <div class="query">
    <a-range-picker
      :show-time="timeOptions"
      :format="format"
      :value-format="format"
      v-model:value="value"
      :disabled-date="disabledDate"
      @change="onChange"
      @openChange="onOpenChange"
      @calendarChange="onCalendarChange"
    />
    <slot></slot>
    <a-button @click="query" class="query_btn">搜索</a-button>
    <a-button @click="reset" class="reset_btn">重置</a-button>
  </div>
</template>
<script setup>
import { ref, defineExpose, defineEmits, defineProps, watch } from 'vue';
import moment from 'moment';
import { getYesterdayDateStr } from '@/utils/util';
import { message } from 'ant-design-vue';
const props = defineProps({
  startTime:{
    type: Number,
    default: undefined
  },
  endTime:{
    type: Number,
    default: undefined
  }
})
const emit = defineEmits(['timeQuery']);
const yesterdayDate = getYesterdayDateStr();
const start = yesterdayDate + ' ' + '00:00';
const end = yesterdayDate + ' ' + '23:59';
const format = 'YYYY-MM-DD HH:mm';
const dates = ref([]);
const value = ref([start, end]);
const timeOptions = ref({
  minuteStep: 5,
  format: 'HH:mm'
});
const disabledDate = (current) => {
  let dis;
  if (!dates.value || dates.value.length === 0 || !current) {
    dis = false;
  } else {
    dis = !current.isSame(dates.value[0], 'day');
  }
  return (current && current > moment().endOf('day')) || dis;
};

const onOpenChange = open => {
  if (open) {
    dates.value = [];
  }
};

const onChange = val => {
  value.value = val;
};

const onCalendarChange = val => {
  dates.value = val;
};
/** 搜索 */
const query = () => {
  const timeRange = value.value;
  if (timeRange.length === 2) {
    emit('timeQuery', getTimeRange());
  } else {
    message.warning('请选择时间范围！');
  }
};
/** 重置 */
const reset = () => {
  value.value = [moment(start, format), moment(end, format)];
  emit('timeQuery', getTimeRange());
};

/** 获取当前时间范围 */
const getTimeRange = () => {
  const timeRange = value.value;
  const startTime = timeRange[0]+":00";
  const endTime = timeRange[1]+':00';
  return { startTime, endTime };
};

watch(()=>props.startTime, (v)=>{
  if(v) value.value[0] = moment(v).format('YYYY-MM-DD HH:mm');
  console.log(v + '===' +moment(v).format('YYYY-MM-DD HH:mm'))
},{immediate: true})

watch(()=>props.endTime, (v)=>{
  if(v) value.value[1] = moment(v).format('YYYY-MM-DD HH:mm');
   console.log(v + '===' +moment(v).format('YYYY-MM-DD HH:mm'))
},{immediate: true})
defineExpose({
  getTimeRange
});
</script>
<style lang="less" scoped>
.query {
  display: flex;
  gap: 0.625rem;
}
.reset_btn {
  width: 4.5rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(11, 60, 100, 0.5);
  border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
  opacity: 1;
  border: 1px solid #0b3c64;
  cursor: pointer;
}
.query_btn {
  width: 4.5rem;
  border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
  opacity: 1;
  border: 1px solid rgba(15, 22, 165, 0.4);
  background: linear-gradient(
    180deg,
    rgba(109, 147, 255, 0.8) 0%,
    rgba(40, 73, 166, 0.8) 49%,
    rgba(18, 49, 130, 0.8) 100%
  );
  color: white;
  cursor: pointer;
}
/deep/ .ant-calendar-picker-input {
  background-color: rgba(11, 60, 100, 0.5);
}
/deep/ .ant-input {
  border: 1px solid #0b3c64;
  color: rgba(255, 255, 255, 0.85);
}

/deep/ .ant-calendar-range-picker-separator {
  color: rgba(255, 255, 255, 0.85);
}

/deep/ .ant-calendar-picker-clear {
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
}
</style>
